new Vue({
    el: '#app',
    data: {
        inputval: 0.03,
        okCoinWebSocket: null,
        spotWebSocket: null,
        baseInfo: {
            "userId": 0,
            "apikey": "",
            "secretKey": "",
            "radix": 0,
            "increase": 0,
            "initialMoney": 0,
            "money": 0,
            "oprationTime": ""
        },
        lastHeartBeat: 0,
        spotlastHeartBeat: 0,
        overtime: 30000,
        dialogVisible: false,//设置KEY
        statusVisible: false,//设置服务状态
        radixVisible: false,//设置基准
        status: {
            futureStatus: false,
            spotStatus: false,
            sendStatus: false
        },
        processor: {
            status: "已停止",
            btntext: "启动",
            type: "primary"
        },
        v: {
            buy: 0,
            eosBuy: 0,
            xrpBuy: 0,
            ltcBuy: 0,
            ethBuy: 0,
            etcBuy: 0,
            bchBuy: 0,
            sell: 0,
            eosSell: 0,
            xrpSell: 0,
            ltcSell: 0,
            ethSell: 0,
            etcSell: 0,
            bchSell: 0,
        },
        cmd: {
            futureusd_btc: "ok_sub_futureusd_btc_ticker_this_quarter",
            futureusd_eos: "ok_sub_futureusd_eos_ticker_this_quarter",
            futureusd_xrp: "ok_sub_futureusd_xrp_ticker_this_quarter",
            futureusd_ltc: "ok_sub_futureusd_ltc_ticker_this_quarter",
            futureusd_eth: "ok_sub_futureusd_eth_ticker_this_quarter",
            futureusd_etc: "ok_sub_futureusd_etc_ticker_this_quarter",
            futureusd_bch: "ok_sub_futureusd_bch_ticker_this_quarter",
            spot_btc_usdt: "ok_sub_spot_btc_usdt_ticker",
            spot_eos_usdt: "ok_sub_spot_eos_usdt_ticker",
            spot_xrp_usdt: "ok_sub_spot_xrp_usdt_ticker",
            spot_ltc_usdt: "ok_sub_spot_ltc_usdt_ticker",
            spot_eth_usdt: "ok_sub_spot_eth_usdt_ticker",
            spot_etc_usdt: "ok_sub_spot_etc_usdt_ticker",
            spot_bch_usdt: "ok_sub_spot_bch_usdt_ticker",
        }
    },
    computed: {
        btc_sub: function () {
            var s = ((this.v.buy - this.v.sell) / this.v.sell);
            // console.log(s);
            // console.log(toPercent(s));
            // console.log(toPercent1(s));
            return toPercent(s);
        },
        eos_sub: function () {
            return toPercent((this.v.eosBuy - this.v.eosSell) / this.v.eosSell);
        },
        xrp_sub: function () {
            return toPercent((this.v.xrpBuy - this.v.xrpSell) / this.v.xrpSell);
        },
        ltc_sub: function () {
            return toPercent((this.v.ltcBuy - this.v.ltcSell) / this.v.ltcSell);
        },
        eth_sub: function () {
            return toPercent((this.v.ethBuy - this.v.ethSell) / this.v.ethSell);
        },
        etc_sub: function () {
            return toPercent((this.v.etcBuy - this.v.etcSell) / this.v.etcSell);
        },
        bch_sub: function () {
            return toPercent((this.v.bchBuy - this.v.bchSell) / this.v.bchSell);
        }
    },
    created() {
        // this.$message('这是一条消息提示');
        this.initWebSocket();
    },
    methods: {
        logout() {
            $.ajax({
                type: "POST",
                url: baseURL + "login/logout",
                dataType: "json",
                async: false,
                success: function (r) {
                    if (r.code == 0) {//获取成功
                        localStorage.setItem("refreshToken", null);
                        localStorage.setItem("token", null);
                        location.href ='login.html';
                    } else {
                        $this.$message(r.msg);
                    }
                }
            });
        },
        openStatusDialog() {
            this.statusVisible = true;
            var $this = this;
            $.ajax({
                type: "POST",
                url: baseURL + "app/getStatus",
                dataType: "json",
                async: false,
                success: function (r) {
                    if (r.code == 0) {//获取成功
                        if (r.data) {
                            $this.processor = {
                                status: "已启动",
                                btntext: "停止",
                                type: "danger"
                            }
                        } else {
                            $this.processor = {
                                status: "已停止",
                                btntext: "启动",
                                type: "primary"
                            }
                        }
                        $this.statusVisible = true;
                    } else {
                        $this.$message(r.msg);
                    }
                }
            });
        },
        getBaseInfo() {
            this.dialogVisible = true;
            var $this = this;
            $.ajax({
                type: "GET",
                url: baseURL + "app/getBaseInfo",
                dataType: "json",
                async: false,
                success: function (r) {
                    if (r.code == 0) {//获取成功
                        $this.baseInfo = r.data;
                        // console.log($this.baseInfo.apikey)
                    } else {
                        $this.$message(r.msg);
                    }
                }
            });
        },
        startOrStop() {
            var url = baseURL + "app/stop";
            if (this.processor.btntext == "启动") {
                url = baseURL + "app/start";
            }

            var $this = this;
            $.ajax({
                type: "POST",
                url: url,
                dataType: "json",
                async: false,
                success: function (r) {
                    if (r.code == 0) {//获取成功
                        if ($this.processor.btntext == "启动") {
                            $this.processor = {
                                status: "已启动",
                                btntext: "停止",
                                type: "danger"
                            }
                        } else {
                            $this.processor = {
                                status: "已停止",
                                btntext: "启动",
                                type: "primary"
                            }
                        }
                    } else {
                        $this.$message(r.msg);
                    }
                }
            });
        },
        updateApiKey() {
            var $this = this;
            $.ajax({
                type: "POST",
                url: baseURL + "app/update",
                dataType: "json",
                async: false,
                data: $this.baseInfo,
                success: function (r) {
                    if (r.code == 0) {
                        $this.$message("修改成功!");
                        $this.dialogVisible = false;
                    } else {
                        $this.$message(r.msg);
                    }
                }
            });
        },
        initWebSocket: function () {
            this.okCoinWebSocket = new WebSocket("wss://real.okex.com:10440/websocket/okexapi");
            this.okCoinWebSocket.onopen = this.onOpen;
            this.okCoinWebSocket.onerror = this.onError;
            this.okCoinWebSocket.onmessage = this.onMessage;
            this.okCoinWebSocket.onclose = this.onClose;
            this.lastHeartBeat = new Date().getTime();
            // console.log("this.lastHeartBeat = " + this.lastHeartBeat)
            setInterval(this.checkConnect, 10000);

            this.spotWebSocket = new WebSocket("wss://real.okex.com:10441/websocket");
            this.spotWebSocket.onopen = this.onSpotOpen;
            this.spotWebSocket.onerror = this.onSpotError;
            this.spotWebSocket.onmessage = this.onSpotMessage;
            this.spotWebSocket.onclose = this.onSpotClose;
            this.spotlastHeartBeat = new Date().getTime();
            // console.log("this.lastHeartBeat = " + this.lastHeartBeat)
            setInterval(this.checkSpotConnect, 10000);
        },
        reconnect() {
            if (this.okCoinWebSocket != null) {
                this.okCoinWebSocket.close();
            }
            if (this.spotWebSocket != null) {
                this.spotWebSocket.close();
            }
            this.okCoinWebSocket = new WebSocket("wss://real.okex.com:10440/websocket/okexapi");
            this.okCoinWebSocket.onopen = this.onOpen;
            this.okCoinWebSocket.onerror = this.onError;
            this.okCoinWebSocket.onmessage = this.onMessage;
            this.okCoinWebSocket.onclose = this.onClose;
            this.lastHeartBeat = new Date().getTime();

            this.spotWebSocket = new WebSocket("wss://real.okex.com:10441/websocket");
            this.spotWebSocket.onopen = this.onSpotOpen;
            this.spotWebSocket.onerror = this.onSpotError;
            this.spotWebSocket.onmessage = this.onSpotMessage;
            this.spotWebSocket.onclose = this.onSpotClose;
            this.spotlastHeartBeat = new Date().getTime();

            if (this.sendStatus) {
                setTimeout(this.reSend, 5000);
            }
        },
        onOpen: function (evt) {
            this.status.futureStatus = true;
            this.print('合约连接成功!', 'success');
        },
        onClose(evt) {
            this.status.futureStatus = false;
            this.print('合约连接已关闭!', 'warning');
        },
        onError(evt) {
            this.print('<span style="color: red;">ERROR:</span> ' + evt.data);
        },
        onMessage(e) {
            // console.log(new Date().getTime() + ": " + e.data);
            var array = JSON.parse(e.data);
            for (var i = 0; i < array.length; i++) {
                var data = array[i];
                //合约买一
                if (data.channel == this.cmd.futureusd_btc) {
                    this.v.buy = data.data.buy;
                } else if (data.channel == this.cmd.futureusd_eos) {
                    this.v.eosBuy = data.data.buy;
                } else if (data.channel == this.cmd.futureusd_xrp) {
                    this.v.xrpBuy = data.data.buy;
                } else if (data.channel == this.cmd.futureusd_ltc) {
                    this.v.ltcBuy = data.data.buy;
                } else if (data.channel == this.cmd.futureusd_eth) {
                    this.v.ethBuy = data.data.buy;
                } else if (data.channel == this.cmd.futureusd_etc) {
                    this.v.etcBuy = data.data.buy;
                } else if (data.channel == this.cmd.futureusd_bch) {
                    this.v.bchBuy = data.data.buy;
                }
            }

            if (array.event == 'pong') {
                this.lastHeartBeat = new Date().getTime();
            }
        },
        checkConnect() {
            this.okCoinWebSocket.send("{'event':'ping'}");
            if ((new Date().getTime() - this.lastHeartBeat) > this.overtime) {
                this.status.futureStatus = false;
                this.print('合约连接已断开!', 'warning');
                this.reconnect();
            }
        },
        doSend(message) {
            // this.print("SENT: " + message);
            this.okCoinWebSocket.send(message);
        },
        onSpotOpen: function (evt) {
            this.status.spotStatus = true;
            this.print('现货连接成功!', 'success');
        },
        onSpotClose(evt) {
            this.status.spotStatus = false;
            this.print('现货连接已关闭!!', 'warning');
        },
        onSpotError(evt) {
            this.print('<span style="color: red;">ERROR:</span> ' + evt.data);
        },
        onSpotMessage(e) {
            // console.log(new Date().getTime() + ": " + e.data);
            var array = JSON.parse(e.data);
            //现货卖一
            for (var i = 0; i < array.length; i++) {
                var data = array[i];
                if (data.channel == this.cmd.spot_btc_usdt) {
                    this.v.sell = data.data.sell;
                } else if (data.channel == this.cmd.spot_eos_usdt) {
                    this.v.eosSell = data.data.sell;
                } else if (data.channel == this.cmd.spot_xrp_usdt) {
                    this.v.xrpSell = data.data.sell;
                } else if (data.channel == this.cmd.spot_ltc_usdt) {
                    this.v.ltcSell = data.data.sell;
                } else if (data.channel == this.cmd.spot_eth_usdt) {
                    this.v.ethSell = data.data.sell;
                } else if (data.channel == this.cmd.spot_etc_usdt) {
                    this.v.etcSell = data.data.sell;
                } else if (data.channel == this.cmd.spot_bch_usdt) {
                    this.v.bchSell = data.data.sell;
                }
            }

            if (array.event == 'pong') {
                this.spotlastHeartBeat = new Date().getTime();
            }
        },
        checkSpotConnect() {
            this.spotWebSocket.send("{'event':'ping'}");
            if ((new Date().getTime() - this.spotlastHeartBeat) > this.overtime) {
                this.status.spotStatus = false;
                this.print('现货连接已断开!', 'warning');
                this.reconnect();
            }
        },
        doSpotSend(message) {
            // this.print("SENT: " + message);
            this.spotWebSocket.send(message);
        },

        print(message, type, title) {
            if (!title) {
                title = "提示";
            }
            if (!type) {
                type = "info";
            }
            this.$notify({
                title: title,
                message: message,
                type: type
            });
        },
        send: function () {
            if (this.status.spotStatus && this.status.futureStatus) {
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_btc + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_eos + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_xrp + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_ltc + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_eth + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_etc + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_bch + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_btc_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_eos_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_xrp_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_ltc_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_eth_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_etc_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_bch_usdt + "'}");
                this.sendStatus = true;
            } else {
                this.print("连接服务器失败,请检查网络是否正常,VPN是否已开启!", "error");
            }
        },
        reSend() {
            if (this.status.spotStatus && this.status.futureStatus) {
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_btc + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_eos + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_xrp + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_ltc + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_eth + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_etc + "'}");
                this.doSend("{'event':'addChannel','channel':'" + this.cmd.futureusd_bch + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_btc_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_eos_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_xrp_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_ltc_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_eth_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_etc_usdt + "'}");
                this.doSpotSend("{'event':'addChannel','channel':'" + this.cmd.spot_bch_usdt + "'}");
                this.sendStatus = true;
            } else {
                this.print("连接服务器失败,请检查网络是否正常,VPN是否已开启,3秒后自动连接!", "error");
                setTimeout(this.reSend, 3000);
            }
        }

    }
});